<template>
  <div class="alluserEvaluate">
    <div class="fixed">
      <div style="margin-bottom:10px">
        <van-nav-bar left-arrow>
          <template #left>
            <van-icon name="arrow-left" size="18" color="#8d8787" @click="$emit('change')" />
          </template>
          <template #title>
            <div>全部评价</div>
          </template>
        </van-nav-bar>
      </div>
      <div class="topAll">
        <p class="topp" :style="checked === 0 ? active : ''" @click="() => { checked = 0 }">
          <span :style="checked === 0 ? active1 : ''">全部</span>(好评率{{goodLve}}%)
        </p>
        <p class="topp" :style="checked === 1 ? active : ''" @click="() => { checked = 1 }">
          <span :style="checked === 1 ? active1 : ''">好评</span>{{ goodCount }}
        </p>
        <p class="topp" :style="checked === 2 ? active : ''" @click="() => { checked = 2 }">
          <span :style="checked === 2 ? active1 : ''">中评</span>{{ centerCount }}
        </p>
        <p class="topp" :style="checked === 3 ? active : ''" @click="() => { checked = 3 }">
          <span :style="checked === 3 ? active1 : ''">差评</span>{{ lowCount }}
        </p>
      </div>
    </div>

    <div class="userEvaluate">
      <div class="evaluate" v-for="(item, index) in filterList" :key="index">
        <div style="display: flex;align-items: center;">
          <div class="top">
            <img :src="item.consumerImg" width="30px" height="30px">
          </div>
          <p style="flex:1;display: flex;flex-direction: column;">
            <span style="font-size: 14px;">{{ item.commentator }}</span>
            <span style="color: rgb(187, 107, 9);">{{ item.isGood == 1 ? "好评" : item.isGood == 2 ? "中评" : "差评"
            }}</span>
          </p>
          <p style="font-size: 12px;">
            {{ item.replyDate }}
          </p>
        </div>
        <div>
          {{ item.review }}
        </div>
        <div class="custorImgArea">
          <img v-for="(ite, index) in item.evaluateImg.split('||')" :key="index" width="60px" height="60px" :src="ite">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
export default {
  props: {
    assess: Array,
    goodLve:Number
  },
  data() {
    return {
      checked: 0,
      // assessList: [
      //   {
      //     "commentator": "cncncn1",
      //     "isGood": 1,
      //     "review": "太好了 真不错1",
      //     "replyDate": "2023-09-07 09:38:00",
      //     "commentatorId": 1,
      //     "evaluateImg": "https://img2.baidu.com/it/u=1294728680,2976403440&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500||https://img0.baidu.com/it/u=1641416437,1150295750&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800||https://img1.baidu.com/it/u=4107987236,956710411&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800||https://img1.baidu.com/it/u=7456317,4282812646&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500||https://img2.baidu.com/it/u=1551859022,2901085096&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500||https://img0.baidu.com/it/u=1724694977,4042951717&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
      //     "consumerImg": "https://img0.baidu.com/it/u=1691000662,1326044609&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1695661200&t=0cfcb89bb108a7ab16bf597d83fd1a97"
      //   },
      //   {
      //     "commentator": "cncncn2",
      //     "isGood": 2,
      //     "review": "太好了 真不错2",
      //     "replyDate": "2023-09-06 09:38:00",
      //     "commentatorId": 2,
      //     "evaluateImg": "https://img2.baidu.com/it/u=1294728680,2976403440&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500||https://img0.baidu.com/it/u=1641416437,1150295750&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800||https://img1.baidu.com/it/u=4107987236,956710411&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800||https://img1.baidu.com/it/u=7456317,4282812646&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500||https://img2.baidu.com/it/u=1551859022,2901085096&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500||https://img0.baidu.com/it/u=1724694977,4042951717&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
      //     "consumerImg": "https://img1.baidu.com/it/u=898692534,2766260827&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1695661200&t=f90dbfcd6275a8557f877b1de8205e4d"
      //   },
      //   {
      //     "commentator": "cncncn3",
      //     "isGood": 3,
      //     "review": "太好了 真不错3",
      //     "replyDate": "2023-09-08 09:38:00",
      //     "commentatorId": 3,
      //     "evaluateImg": "https://img2.baidu.com/it/u=1294728680,2976403440&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500||https://img0.baidu.com/it/u=1641416437,1150295750&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800||https://img1.baidu.com/it/u=4107987236,956710411&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800||https://img1.baidu.com/it/u=7456317,4282812646&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500||https://img2.baidu.com/it/u=1551859022,2901085096&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500||https://img0.baidu.com/it/u=1724694977,4042951717&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
      //     "consumerImg": "https://img1.baidu.com/it/u=2175762828,1239136621&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1695661200&t=7956d8800b498796f8e85ee4b1f7cfec"
      //   },
      //   {
      //     "commentator": "cncncn4",
      //     "isGood": 1,
      //     "review": "太好了 真不错4",
      //     "replyDate": "2023-09-05 09:38:00",
      //     "commentatorId": 4,
      //     "evaluateImg": "https://img2.baidu.com/it/u=1294728680,2976403440&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500||https://img0.baidu.com/it/u=1641416437,1150295750&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800||https://img1.baidu.com/it/u=4107987236,956710411&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800||https://img1.baidu.com/it/u=7456317,4282812646&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500||https://img2.baidu.com/it/u=1551859022,2901085096&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500||https://img0.baidu.com/it/u=1724694977,4042951717&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
      //     "consumerImg": "https://img1.baidu.com/it/u=1977040170,3927450426&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      //   },
      //   {
      //     "commentator": "cncncn1",
      //     "isGood": 1,
      //     "review": "太好了 真不错1",
      //     "replyDate": "2023-09-07 09:38:00",
      //     "commentatorId": 5,
      //     "evaluateImg": "https://img2.baidu.com/it/u=1294728680,2976403440&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500||https://img0.baidu.com/it/u=1641416437,1150295750&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800||https://img1.baidu.com/it/u=4107987236,956710411&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800||https://img1.baidu.com/it/u=7456317,4282812646&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500||https://img2.baidu.com/it/u=1551859022,2901085096&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500||https://img0.baidu.com/it/u=1724694977,4042951717&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
      //     "consumerImg": "https://img0.baidu.com/it/u=1691000662,1326044609&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1695661200&t=0cfcb89bb108a7ab16bf597d83fd1a97"
      //   },
      //   {
      //     "commentator": "cncncn2",
      //     "isGood": 2,
      //     "review": "太好了 真不错2",
      //     "replyDate": "2023-09-06 09:38:00",
      //     "commentatorId": 6,
      //     "evaluateImg": "https://img2.baidu.com/it/u=1294728680,2976403440&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500||https://img0.baidu.com/it/u=1641416437,1150295750&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800||https://img1.baidu.com/it/u=4107987236,956710411&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800||https://img1.baidu.com/it/u=7456317,4282812646&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500||https://img2.baidu.com/it/u=1551859022,2901085096&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500||https://img0.baidu.com/it/u=1724694977,4042951717&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
      //     "consumerImg": "https://img1.baidu.com/it/u=898692534,2766260827&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1695661200&t=f90dbfcd6275a8557f877b1de8205e4d"
      //   },
      //   {
      //     "commentator": "cncncn3",
      //     "isGood": 3,
      //     "review": "太好了 真不错3",
      //     "replyDate": "2023-09-08 09:38:00",
      //     "commentatorId": 7,
      //     "evaluateImg": "https://img2.baidu.com/it/u=1294728680,2976403440&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500||https://img0.baidu.com/it/u=1641416437,1150295750&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800||https://img1.baidu.com/it/u=4107987236,956710411&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800||https://img1.baidu.com/it/u=7456317,4282812646&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500||https://img2.baidu.com/it/u=1551859022,2901085096&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500||https://img0.baidu.com/it/u=1724694977,4042951717&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
      //     "consumerImg": "https://img1.baidu.com/it/u=2175762828,1239136621&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1695661200&t=7956d8800b498796f8e85ee4b1f7cfec"
      //   },
      //   {
      //     "commentator": "cncncn4",
      //     "isGood": 1,
      //     "review": "太好了 真不错4",
      //     "replyDate": "2023-09-05 09:38:00",
      //     "commentatorId": 8,
      //     "evaluateImg": "https://img2.baidu.com/it/u=1294728680,2976403440&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500||https://img0.baidu.com/it/u=1641416437,1150295750&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800||https://img1.baidu.com/it/u=4107987236,956710411&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800||https://img1.baidu.com/it/u=7456317,4282812646&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500||https://img2.baidu.com/it/u=1551859022,2901085096&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500||https://img0.baidu.com/it/u=1724694977,4042951717&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
      //     "consumerImg": "https://img1.baidu.com/it/u=1977040170,3927450426&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      //   }
      // ],
      assessList: [],
      active: {
        "color": "rgb(16, 191, 16)",
        "border": "1px solid rgb(16, 191, 16)"
      },
      active1: {
        "color": "rgb(16, 191, 16)"
      }
    }
  },
  methods: {
    changeChecked() {
      this.checked = 0
    }
  },
  computed: {
    filterList() {
      if (this.checked == 1) {
        return this.assessList.filter(item => item.isGood == 1)
      } else if (this.checked == 2) {
        return this.assessList.filter(item => item.isGood == 2)
      } else if (this.checked == 3) {
        return this.assessList.filter(item => item.isGood == 3)
      } else {
        return this.assessList
      }
    },
    goodCount() {
      let count = 0
      this.assessList.map(item => {
        if (item.isGood === 1) {
          count += 1
        }
      })
      console.log(count)
      return count
    },
    centerCount() {
      let count = 0
      this.assessList.map(item => {
        if (item.isGood === 2) {
          count += 1
        }
      })
      console.log(count)
      return count
    },
    lowCount() {
      let count = 0
      this.assessList.map(item => {
        if (item.isGood === 3) {
          count += 1
        }
      })
      console.log(count)
      return count
    },

  },
  mounted(){
    this.assessList=this.assess
    console.log(this.assessList)
  }
}
</script>
<style scoped lang="scss">
.alluserEvaluate {
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .topAll {
    margin-bottom: 15px;
    display: flex;
    padding-left: 10px;
    box-sizing: border-box;

    .topp {
      color: #cbc5c5;
      background: rgb(243, 252, 230);
      font-size: 14px;
      padding: 5px 10px;
      margin-right: 20px;
      border-radius: 10px;

      // color: rgb(16, 191, 16);
      span {
        color: #000;
      }
    }
  }

  .userEvaluate {
    overflow-y: scroll;

    .evaluate {
      // width: 96%;
      margin: 0 auto;
      // height: 50%;
      background: #fff;
      // border-radius: 10px;
      // box-sizing: border-box;
      padding: 10px 15px 10px 15px;
      margin-bottom: 5px;
      border-bottom: 5px solid #eee;

      .top {
        overflow: hidden;
        width: 30px;
        height: 30px;
        border-radius: 30px;
        margin-right: 10px;
      }

      .custorImgArea {
        overflow-x: scroll;
        display: flex;
        justify-content: space-evenly;

        img {
          margin: 7px;
        }
      }
    }
  }

}
</style>